<template>
     <hooyn-nav-bar
    class="header"
    leftIcon="arrow-left"
    title="商户详情"
    leftIconfont="true"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  />
  <div class="law">
    <div class="law-top">
        <img src="../../assets/lisddr.jpg" class="lisddr">
    </div>
    <div class="law-contenet">
        <div class="item-title" >广东法广律师事务所 <van-icon name="arrow"  @click="finditem"/></div>
        <div class="item-xin">
            <div class="xing-left">
                <img v-for="item in 5" :key="item" src="../../assets/xing.png" alt="">  <span class="lisr">5.0 </span><span>0条</span>
            </div>
            <div class="xing-right">
                <span>线下</span>
            </div>
        </div>
        <div class="item-zhyex">
            专业性：5 服务态度：5 时效性：5
        </div>
        <div class="item-fwtd">
            <span @click="listd">法律服务</span>
            <span>合同审核</span>
            <span>公司并购</span>
            <span>法律咨询</span>
            <span>诉讼代理服务</span>
            <span>常年法律顾问服务</span>
        </div>
        <div class="item-yesj">
            营业时间 周一至 周五 09:00-17:30
        </div>
        <div class="item-dz">
           <div class="dz-left">
            <div class="list1">所在地址</div> <div class="list2">广东省深圳市宝安区燕罗路2汇业金融大厦2层</div>
           </div>
           <div class="dz-right">
           24.92km <van-icon name="arrow" />
           </div>
        </div>
    </div>
    <div class="law-ul">
        <ul>
            <li :class="seate.index==1?'ative':''" @click="seate.index=1">服务信息</li>
            <li :class="seate.index==2?'ative':''" @click="seate.index=2">评价信息</li>
            <li :class="seate.index==3?'ative':''" @click="seate.index=3">动态信息</li>
        </ul>
        <div class="fwxx">
            <div class="fw-left">
                服务消息(0)
            </div>
            <div class="fw-right">
                <van-icon name="arrow" />
            </div>
        </div>
  </div>
  <div class="pjia">
            <div class="fw-left">
                评价消息(0)
            </div>
            <div class="fw-right">
                <van-icon name="arrow" />
            </div>
     </div>
     <div class="pjia">
            <div class="fw-left">
                动态消息(0)
            </div>
            <div class="fw-right">
                <van-icon name="arrow" />
            </div>
     </div>
     <div class="tj">
        为您推荐
     </div>
     <div class="zsmysju"> 
        暂时没有数据
     </div>
  </div>
 
</template>
<script setup >
const router = useRouter()
    const seate =reactive({
        index:1,
    })
    const finditem = () => {
  router.push({
    path:`/lawitem`,
    
  })
}
const listd = () => {
    router.push({
    path:`/cs`,
    
  }) 
}

</script>
<style lang="scss" scoped>
.law{
    position: relative;
    background: #FBF9F8;
    height:100%;
}
.lisddr{
    width: 100%;
    height: 12rem;
}
.law-contenet{
position: relative;
top: -1rem;
border-radius: 1rem 1rem 0 0;
padding: 1rem;
padding-bottom: .5rem;
background-color: #fff;
    .item-title{
        font-size: 1.1rem;
        line-height: 1.5rem;
        margin-bottom: .4rem;
        .van-icon{
            line-height: 1.5rem;
            font-size: .9rem;
            color: #333;
        }
    }
.item-xin{
    display: flex;
    margin-bottom: .4rem;
    justify-content: space-between;
    .xing-left{
        display: flex;
        align-items: center;
        img{
            margin-right: .3rem;
            height: 1rem;
            width: 1rem;
        }
        span{
            font-size: .7rem;
            margin-right: .3rem;
        }
        .lisr{
            color: #F49477;
        }
    }
    .xing-right{
        font-size: .7rem;
        padding: 0 .2rem;
        background-color: #D2FDD3;
        color: #73A160;
    }
}
.item-zhyex{
    font-size: .7rem;
    margin-bottom: .4rem;
}
.item-fwtd{
    margin-bottom: .3rem;
    span{
        padding: 0 .4rem;
    display: inline-block;
    margin: 0  .4rem .4rem 0;
    background-color: #FEECD8;
    color: #9D6B53;
    font-size: .7rem;
    border-radius: 2rem;
}
}
.item-yesj{
    border-top: 1px solid #CDCDCD;
    padding-top:.5rem ;
    font-size: .7rem;
    margin-bottom: .4rem;
}
.item-dz{
    border-top: 1px solid #CDCDCD;
    padding-top:.5rem ;
    margin-bottom: .4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .dz-left{
        
        width: 80%;
        display: flex;
        align-items: center;
        .list1{
            width: 20%;
            font-size: .7rem;
        }
        .list2{
            width: 80%;
            font-size: .7rem;
        }
    }
    .dz-right{
    text-align: right;
        width: 20%;
        font-size: .7rem;
        color: #D1A08B;
        .van-icon{
            color: #898989;
        }
    }
}
}
.law-ul{
    background-color: #fff;
    padding: 1rem;
    ul{
        margin-bottom:1rem;
        width: 100%;
        display: flex;
        justify-content: space-around;
        li{
            font-size: 1rem;
        }
        .ative{
            border-bottom:2px solid black  ;
            border-image: linear-gradient(to top right,#ED5331, #F9AE77) 10;
        }
    }
    .fwxx{
        display: flex;
        justify-content: space-between;
        .fw-left{
            font-size: 1rem;
        }
        .fw-right{
            font-size: 。9rem;
            color: #868686;
        }

    }
}
.pjia{
    margin-top: 1rem ;
    padding: 1rem;
    padding: 1rem;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    .fw-left{
            font-size: 1rem;
        }
        .fw-right{
            font-size: .9rem;
            color: #868686;
        }
}

.tj{
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    font-size: 1rem;
    background-color: #fff;
}
.zsmysju{
    height:7rem;
    line-height: 7rem;
    font-size: .9rem;
text-align: center
;
}
</style>